.el-checkbox-wrapper {
  > * {
    font-size: 1.0769rem;
    display: inline-block;
    vertical-align: middle;
  }
  cursor: pointer;
  min-height: 35px;
  line-height: 35px;
  user-select: none;
  position: relative;
  display: inline-block;
  -webkit-user-select: none;
  &.el-disabled {
    color: @disabled;
    cursor: not-allowed;
    .el-checkbox {
      .el-checkbox-input {
        &:hover + .el-unchecked {
          color: @disabled;
        }
      }
      .el-checked {
        color: @disabled;
      }
      &.el-radio input[type=radio] {
        cursor: not-allowed;
        + span:before {
          border-color: @disabled;
        }
        &:checked + span {
          &:before {
            border-color: @disabled;
          }
          &:after {
            background: @disabled;
          }
        }
      }
      &.el-switch {
        input {
          + span {
            &:before {
              border: @disabled;
              background-color: @d_default;
            }
            &:after {
              background-color: @default;
            }
          }
          &:checked + span {
            &:before {
              border-color: @border;
              background-color: @disabled;
              box-shadow: @disabled 0 0 0 1.2307rem inset;
            }
          }
        }
      }
    }
  }

  .el-checkbox {
    margin-left: 0.3846rem;
    margin-right: 0.3846rem;
    position: relative;
    .el-checkbox-input {
      top: 0;
      left: 0;
      right: 0;
      border: 0;
      bottom: 0;
      opacity: 0;
      z-index: 1;
      outline: 0;
      width: 100%;
      height: 100%;
      background: 0 0;
      cursor: pointer;
      position: absolute;
      filter: alpha(opacity=0);
      -webkit-appearance: none;
      &:hover + .el-unchecked {
        color: @d_primary;
      }
    }
    .el-checked {
      color: @d_primary;
    }
    &.el-radio {
      height: 1rem;
      line-height: 1rem;
      vertical-align: middle;
      input[type=radio] {
        height: 1rem;
        position: absolute;
        + span {
          width: auto;
          display: block;
          background: none;
          position: relative;
          height: 1rem;
          &:before {
            content: '';
            width: 0.84615rem;
            height: 0.84615rem;
            border-radius: 50%;
            position: relative;
            display: inline-block;
            box-sizing: content-box;
            transition: border .2s;
            border: 1px solid @normalText;
            -webkit-transition: border .2s;
          }
        }
        &:checked + span {
          &:before {
            border-color: @d_primary;
            transition: border .2s;
            -webkit-transition: border .2s;
          }
          &:after {
            content: '';
            width: 0.38461rem;
            height: 0.38461rem;
            border-radius: 50%;
            position: absolute;
            background: @d_primary;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
          }
        }
      }
      &:hover {
        input + span:before {
          border-color: @d_primary;
        }
      }
    }
    &.el-switch {
      height: 1.3846rem;
      line-height: 1.3846rem;
      vertical-align: middle;
      input {
        &[type=checkbox], &[type=radio] {
          height: 1.3846rem;
          position: absolute;
          + span {
            width: auto;
            height: auto;
            display: block;
            background: none;
          }
        }
        + span {
          &:before {
            content: '';
            width: 28px;
            height: 1.2307rem;
            position: relative;
            display: inline-block;
            box-sizing: content-box;
            border-radius: 0.6153rem;
            border: 1px solid @border;
            background-color: @default;
            background-clip: content-box;
            box-shadow: @shadow 0 0 0 0 inset;
            -webkit-background-clip: content-box;
            transition: border .4s, box-shadow .4s;
            -webkit-transition: border .4s, -webkit-box-shadow .4s;
          }
          &:after {
            top: 0;
            left: 0;
            content: '';
            width: 1.3846rem;
            height: 1.3846rem;
            position: absolute;
            border-radius: 100%;
            transition: left .2s;
            background-color: #fff;
            -webkit-transition: left .2s;
            box-shadow: 0 1px 3px @shadow;
          }
        }
        &:checked + span {
          &:before {
            border-color: @primary;
            background-color: @primary;
            box-shadow: @primary 0 0 0 1.2307rem inset;
            transition: border .4s, box-shadow .4s, background-color 1.2s;
            -webkit-transition: border .4s, -webkit-box-shadow .4s, background-color 1.2s;
          }
          &:after {
            left: 1rem
          }
        }
      }
    }
  }

}

.el-checkbox-group {
  padding: 0.7692rem 0;
  .el-checkbox-row {
    padding-bottom: 0.3846rem;
  }
}

.el-checkbox-button{
  padding: 0.7692rem 0;
  .el-checkbox-row {
    padding-bottom: 0.3846rem;
    .el-checkbox-wrapper{
      border: 1px solid @border;
      border-left: 0;
      padding: 0 0.7692rem;
      background-color: #fff;
      
      &:not(:first-child)::before{
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: -1px;
        width: 1px;
        height: 100%;
        background-color: @border;
      }
      &.el-checkbox-checked{
        color: @primary;
        border-color: @primary;
        z-index: 1;
        &:not(:first-child)::before{
          background-color: @primary;
        }
        &:first-child{
          border-left: 1px solid @primary;
        }
        &:last-child{
          border-right: 1px solid @primary;
        }
      }
      .el-radio{
        display: block;
        width: 0;
        height: 0;
        span{
          opacity: 0;
        }
      }
      &:first-child{
        border-left: 1px solid @border;
        border-radius: @borderRadio 0 0 @borderRadio;
      }
      &:last-child{
        border-right: 1px solid @border;
        border-radius: 0 @borderRadio @borderRadio 0; 
      }
    }
  }
}


